*{padding: 0px;margin: 0px;} 
body{background-color: #121212;font-family: Helvetica Neue,Helvetica,Arial,sans-serif;color:#ffffff;}
li{display: inline-block;}
a{color: #ffffff;text-decoration: none}
p{font-size: 1.2em;}
img{display: block;}
.container{width: 1400px;margin: auto;position: relative;}
.container>div{width: 100%;margin: auto;position: relative;}

#header-wrapper{width: 100%;height: 160px;position: fixed;z-index: 100;background-color: #121212;}
#header-wrapper header{margin: auto;width: 80%;}
#header-wrapper #header-nav{margin: auto;width: 80%;}

header #logo{width: 100%;height: 80px;position: relative;}
header #logo a h1{display:inline-block}
header #logo a img{height: 50px;object-fit: cover;top:20px;display: inline-block;position: relative;}

#header-nav{width: 100%;height: 50px;margin-bottom: 40px;
	background-color: #2A2A2A;}
#header-nav a{line-height: 50px; width: 200px;
	text-align: center;font-size:1.3em;
	float: left;
	transition: background-color 0.4s linear;}
#header-nav a:hover{background-color: #0078f2;}

/*首页-展示区*/
#home-show{width: 100%;height: 504px;margin-bottom: 40px;position: relative;top: 200px;}
#home-show>div{height: 100%;display: inline-block;float: left;}
#home-show .home-show-media{width: 64%;text-align:center;overflow: hidden;position: relative;}
#home-show .home-show-media a{width: 100%;height: 100%;display: block;position: relative;}
#home-show .home-show-media a .home-show-media-box{width: 100%;height: 100%;position: relative;transition: opacity 0.3s;}
#home-show .home-show-media a .home-show-media-box:hover{opacity: 0.8;}
#home-show .home-show-media a #home-show-media-box-img{height: 100%;width: 100%;object-fit: cover;position: absolute;}
#home-show .home-show-media a #home-show-media-box-video{height: 100%;width: 100%;object-fit: cover;position: relative;}
#home-show .home-show-info{width: 36%;left:64%;background-color: #2A2A2A;position: absolute;transition: background-color 0.3s;}
#home-show .home-show-info:hover{background-color: #3a3a3a;}
#home-show .home-show-info #home-show-info-address{width: 100%;height: 100%;display: block;position: relative;}
#home-show .home-show-info a .home-show-info-box{width: 50%;height: 20%;position: absolute;top:40%;left: 25%;text-align: center;}
#home-show .home-show-info a .home-show-info-box #home-show-info-1{top:10%;position: relative;display: block;font-size: 1.3em;}
#home-show .home-show-info a .home-show-info-box #home-show-info-2{top:30%;position: relative;display: block;font-size: 1.1em;}

/*首页-信息区*/
#information{width: 100%;height: 480px;top: 200px;}
#information>div{height: 100%;display: inline-block;float: left;}
#information>div>span{font-size: 1.5em;}

/*首页-信息区-club挑战*/
#challenge{width:64%;position: relative;}
#challenge #challenge-background{width:100%;height: 80%;margin-top: 20px;position:absolute;opacity: 0.5;overflow:hidden;}
#challenge-table{width:100%;height: 80%;margin-top: 20px;position: relative;border: solid 3px #2A2A2A;}
#challenge-list{width:100%;height: 110px;}
#challenge-list .challenge-item-iconbox{width:110px;transition: background-color 0.5s;border-radius: 5px;}
#challenge-list #challenge-item-iconbox-1{width:110px;background-color: #3f3f3f;}
#challenge-list .challenge-item-icon{width:90px;height:90px;padding: 10px;}
#challenge-info{width:100%;}
#challenge-infobox{width:95%;height: 80%;margin: auto;position: relative;}
#challenge-infobox .challenge-item-info{width:100%;height: 100%;position: absolute;opacity: 0;}
#challenge-infobox #challenge-item-info-1{opacity: 1;}
#challenge-infobox .challenge-item-info p{font-size: 1.2em;margin-top: 25px;}
#challenge-infobox .challenge-item-info .challenge-item-info-reward{margin-top: 20px;position: relative;}
#challenge-infobox .challenge-item-info .challenge-item-info-reward img{width: 40px;margin-right: 5px;float: left;}
#challenge-infobox .challenge-item-info .challenge-item-info-reward span{margin: 8px 10px 0 0;float: left;font-size: 1.2em;}

/*首页-信息区-更新信息*/
#update{width:36%;}
#update-list{width:100%;height: 80%;margin-top: 20px;background-color: #2A2A2A;}
#update-list nav{width:100%;height: 100%;}
#update-list nav ul{width:100%;height: 100%;}
#update-list nav li{width:100%;height: calc(25% - 1px);border-bottom: solid 1px #121212;
	transition: background-color 0.4s linear;}
#update-list nav li:hover{background-color: #0078f2;}
#update-list nav li a{width:100%;height:100%;display: block;}	
#update-list .update-item{width: 90%;height: 80%;margin-top: 10px ;margin-left: 30px;}
#update-list .update-date{font-size: 0.8em;color:  #a6a6a6;margin-bottom: 10px;}
#update-list .update-title{font-size: 1em;}

/*首页-推荐区*/
#recommend{width: 100%;height: 400px;top: 200px;}
#recommend-title{font-size: 1.5em;}
#recommend-box{width: 100%;height: 200px;margin-top: 20px;position: relative;}
#recommend-box .recommend-item{width: 320px;height: 200px;margin-left:calc(12.5% - 160px);margin-right:calc(12.5% - 160px);
	background-color: #2A2A2A;
	float: left;position: relative;
	overflow: hidden;}
#recommend-box .recommend-item img{width: 100%;height: 100%;transition: opacity 0.2s;}
#recommend-box .recommend-item:hover img{opacity: 0.4;}
#recommend-box .recommend-item div{width: 90%;height: 100%;margin-left: 15px;top: -0px;position: relative;transition: top 0.5s ease;}
#recommend-box .recommend-item:hover div{top: -120px; z-index: 100;}


#footer-wrapper{text-align: center;margin-top: 50px;top: 200px;}
#footer-nav{width: 100%;height: 20px;margin-bottom: 40px;}
#footer-nav a{line-height: 50px; width: 100px;font-size:1em;float: left;}
#footer-wrapper>section{margin: 20px;}
#footer-wrapper footer{margin-bottom: 40px;}


/*联系表单部分*/
.contact-form{width: 1400px;height: 650px;margin: auto;font-size: 1.5em;}
.contact-form #contact{margin-left: 50px;margin-top: 40px;}
.contact-form #contact .form-row{margin-top: 20px;}
.contact-form #contact .form-row .contact input{height: 30px;background-color: #3A3A3A;font-size: 1em;border: 0;}
.contact-form #contact .form-row .contact #name{width: 260px;}
.contact-form #contact .form-row .contact #contactway{width: 970px;}
.contact-form #contact .form-row .sex{width: 20px;height: 20px;line-height: 20px;vertical-align: middle;}
.contact-form #contact .form-row .purpose{width: 20px;height: 20px;line-height: 20px;vertical-align: middle;}
.contact-form #contact .form-row textarea{width:80%;height: 180px;font-size: 1.2em;}
.contact-form #contact .form-row select{width:120px;height:30px;font-size: 0.8em;}
.contact-form .form-row-button input{height: 40px;width: 60px;font-size: 0.8em;margin: 20px 20px 0 0;}
#message{visibility:hidden;}
#submitmessage{padding: 5px 10px;}


/*登录部分*/
#header-nav #login {float: right;width: 150px;text-align: center;line-height: 50px;}
#header-nav #login a{width: 150px;font-size:1em;background-color: #0078f2;}
#header-nav #login a:hover{background-color: #003f7f;}

#login_content{margin-bottom: 200px;}
#login_content_tip{width:100%;height: 150px;text-align: center;margin-top: 150px;}
#login_content_form{width:100%;height: 150px;text-align: center;}
#login_content_form_textarea_name{width: 30%;height: 40px;background-color: #3A3A3A;font-size: 1em;border: 0;color: #FFFFFF;}
#login_content_form_button_submit{width: 50px;height: 30px;margin-top: 50px;border: 0;background-color: #3a3a3a;color: #a3a3a3;transition: background-color 0.2s;}
#login_content_form_button_submit:hover{background-color: #0078f2;color: #ffffff;}


/*干员-信息部分*/
#operator-info{height: 800px;top: 200px;}
#operator-info>div{height: 100%;display: inline-block;float: left;}
#operator-info .operator-img{width: 35%;height: 800px;position: relative;overflow: hidden;border-bottom: #573e59 2px solid;border-right: #573e59 2px solid;}
#operator-info .operator-img img{width: 100%;position: absolute;top:10%}
#operator-info .patchnotes{width: 60%;position: relative;margin-left: 20px;}
#operator-info #patchnotes-1{opacity: 1;}
#operator-info #patchnotes-2{opacity: 0;position: absolute;top: 0;left: 35%;}
#operator-info .patchnotes .patchnotes-name{position: absolute;left: -120px;}
#operator-info .patchnotes .patchnotes-loadout{width: 100%;height: 800px;position: relative;}
#operator-info .patchnotes .patchnotes-loadout .patchnotes-loadout-category{width: 45%;border-top: #573e59 2px solid;margin-left: 5%;}
#operator-info .patchnotes .patchnotes-loadout #patchnotes-loadout-category-1{height: 50%;}
#operator-info .patchnotes .patchnotes-loadout #patchnotes-loadout-category-2{height: 50%;}
#operator-info .patchnotes .patchnotes-loadout #patchnotes-loadout-category-3{left: 50%;top: 0;position: absolute;}
#operator-info .patchnotes .patchnotes-loadout .patchnotes-loadout-category .patchnotes-loadout-category-title{margin-top: 8%;}
#operator-info .patchnotes .patchnotes-loadout .patchnotes-loadout-category .patchnotes-loadout-weapon .media img{margin-left: 10%;}
#operator-info .patchnotes .patchnotes-loadout .patchnote-stats{width: 45%;height: 20%;border-top: #573e59 2px solid;margin-left: 5%;left: 50%;top: 50%;position: absolute;}
#operator-info .patchnotes .patchnotes-loadout .patchnote-stats .patchnote-stat{width: 50%;float: left;margin-top: 8%;text-align: center;}
#operator-info .patchnotes .patchnotes-loadout .patchnote-stats .patchnote-stat .react-rater{font-size: 1.5em;}
#operator-info .patchnotes .patchnotes-loadout .patchnotes-ability{width: 45%;border-top: #573e59 2px solid;margin-left: 5%;left: 50%;top: 66%;position: absolute;}
#operator-info .patchnotes .patchnotes-loadout .patchnotes-ability h2{margin-top: 8%;}
#operator-info .patchnotes .patchnotes-loadout .patchnotes-ability .patchnotes-ability-title{}
#operator-info .patchnotes .patchnotes-loadout .patchnotes-ability img{left: 50%;top: 20%;position: absolute;}
#operator-info .patchnotes .patchnotes-loadout .patchnotes-ability .patchnotes-ability-info{margin-top: 30%;}
/*干员-选取部分*/
#operator-choose{height: 800px;margin-top: 50px;top: 200px;}
#operator-choose #operator-choose-table{width: 80%;height: 100%;margin: auto;}
#operator-choose #operator-choose-table #operator-choose-table-h-1{margin: auto;background-color: #eb741b;}
#operator-choose #operator-choose-table #operator-choose-table-h-2{margin: auto;background-color: #1a87eb;}
#operator-choose #operator-choose-table #operator-choose-table-h img{margin: auto;}
#operator-choose #operator-choose-table .operator-choose-table-r td{transition: background-color 0.5s;border-radius: 5px;border: #2a2a2a 2px solid;}
#operator-choose #operator-choose-table .operator-choose-table-r td:hover{background-color: #2a2a2a;}
#operator-choose #operator-choose-table .operator-choose-table-r img{margin: auto;}
#operator-choose #operator-choose-table .operator-choose-table-space{border-radius: 5px;border: #ffffff 4px solid;}
#operator-choose #operator-choose-table .operator-choose-table-r .operator-choose-table-space{border-radius: 5px;border: #ffffff 4px solid;}


/*cg*/
#showbox{width: 1400px;height: 787.5px;background-color: #2a2a2a;top: 200px;box-shadow:0 4px 15px #FFFFFF;border-radius: 5px;overflow: hidden;position: relative;}
#showbox img{width: 100%;}
#choosebox{width: 100%;height: 600px;top: 200px;margin-top: 50px;}
#choosebox #cg1{width: 30%;margin-left: 20px;box-shadow:0 4px 15px #FFFFFF;border-radius: 5px;overflow: hidden;float: left;}
#choosebox #cg2{width: 30%;margin-left: 50px;box-shadow:0 4px 15px #FFFFFF;border-radius: 5px;overflow: hidden;float: left;}
#choosebox #cg3{width: 30%;margin-right: 20px;box-shadow:0 4px 15px #FFFFFF;border-radius: 5px;overflow: hidden;float: right;}
#pagebar{width: 50%;height: 30px;margin: auto;text-decoration: none;text-align: center;}
#pagebar a{width:5%;line-height: 30px;display: inline-block;transition: background-color;border-radius: 5px;}
#pagebar a:hover{background-color: #2a2a2a;}
#pagebar .arrow{width:10%;}

/*需求性待定内容*/
/*访问*/
#displayvisit{position:absolute;top:45px; left:1360px;color:#a6a6a6;}
/*时间*/
#displaydate{position:absolute;top:45px; left:1470px;color:#a6a6a6;}
#displaytime{position:absolute;top:45px; left:1620px;color:#a6a6a6;}
/*广告*/
#checkpoint-box{position:absolute;bottom:15px;right:15px;text-align: center;}
#checkpoint-box a{display:block; float:left;
    width:8px; height:8px; margin:2px;
    border:solid 2px #ffffff; border-radius: 4px;
    background-color:#121212;
    }
#checkpoint-box #a1{background-color:#ffffff;}

canvas{margin: auto;background-color: #A3A3A3;opacity: 0.5;}

